<section class="panel panel-default todo-panel">
  <div class="panel-heading">
    <i class="iconfont fl" [ngClass]="{ 'icon-circle': !( isAllChecked$ | async ), 'icon-select': isAllChecked$ | async }" (click)="selectAllTodo()"></i>
    <h3 class="panel-title">Todo List</h3>
  </div>
  <div class="panel-body">
    <ul>
      <li *ngFor="let todo of ( todoList$ | async ); let i = index" [attr.data-index]="i">
        <app-todo-item [i]="i" [todo]="todo"></app-todo-item>
        <!-- <i class="iconfont" [ngClass]="{ 'icon-circle': !todo.checked, 'icon-select': todo.checked }" (click)="selectTodo(todo)"></i>
        <label>{{ todo.name }}</label>
        <i class="iconfont icon-delete fr del" (click)="removeTodo(i)"></i> -->
      </li>
    </ul>
  </div>
  <div class="panel-footer">
    <span>{{ unselectedTodoCount$ | async }} items left</span>
  </div>
</section>
